<template>
  <div class="patient-details">
    <TopBar>
      <div slot="left" class="el-icon-back" @click="()=>{this.$emit('goBack')}">
        返回
      </div>
      <div slot="title" style="background:#fff;">
        <el-button type="primary" round @click="()=>{finishData()}">完善资料</el-button>
        <el-button type="primary" round @click="()=>{mailModel()}">邮寄牙模</el-button>
        <el-button type="primary" round @click="()=>{confirmMake()}">确认制作</el-button>
        <el-button type="primary" round @click="()=>{confirmReceipt()}">确认收货</el-button>
        <el-button type="primary" round @click="()=>{stealth3D()}">隐形3D方案</el-button>
        <el-button type="primary" round @click="()=>{commitData()}">提交资料</el-button>
        <el-button type="primary" round @click="()=>{startVisit()}">发起复诊</el-button>

      </div>
    </TopBar>
    <div class="details-body">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in navBarItem " :key="item.id+'_tabs'" :label="item.name" :name="item.id">
          <div class="details-body-panel">
            <component :is="item.id" :params="params"></component>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="完善资料" :visible.sync="addVisible" width="1200px">
      <AddPatient :params="params" @goBack="addVisible =false"></AddPatient>
    </el-dialog>
    <el-dialog title="确认制作" :visible.sync="dialogVisible" width="800px">
      <ConfirmMake :params="params" @goBack="dialogVisible =false"></ConfirmMake>
    </el-dialog>
    <el-dialog title="收货单" :visible.sync="receiveOrderVisible" width="800px">
      <ReceiveOrder :params="params">
        <el-button type="primary" round @click="receiveOrderVisible = false">确认收货</el-button>
      </ReceiveOrder>
    </el-dialog>
  </div>
</template>
<script>
import Overview from './overview';
import Case from './case';
import Report from './report';
import Order from './order';
import MailDentalCast from './mailDentalCast';
import AddPatient from '@/views/components/addPatient';
// import PatientDetails from '@/views/components/patientDetails';
import ReceiveOrder from '@/views/components/receiveOrder';
import ConfirmMake from '@/views/docWork/ConfirmMake';
// 头部导航
import TopBar from '../TopBar';

export default {
  name: 'PatientDetails',
  components: {
    Overview,
    Case,
    Report,
    Order,
    MailDentalCast,
    TopBar,
    AddPatient,
    ReceiveOrder,
    ConfirmMake
  },
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      navBarItem: [
        { name: '治疗概览', id: 'overview', params: {} },
        { name: '患者病历', id: 'case' },
        { name: '患者报告', id: 'report' },
        { name: '患者订单', id: 'order' },
        { name: '邮寄牙模', id: 'mailDentalCast' }
      ],
      activeName: 'overview',
      addVisible: false,
      dialogVisible: false,
      receiveOrderVisible: false,
      showTitle: '',

    };
  },
  destroyed() {
    this.$store.dispatch('components/changeComponents', {
      id: 'SET_SIDEBAR', // 修改的显示的位置，可以不写
      isShow: false, // 是否显示
      components: 'Steps', // 组件类型
      Observer: { // 映射方法， 内部参数自定义，可以由组件内部发起进行跨域操作。
        refresh: () => {
          console.warn('Test Refresh !');
        }
      } // 组件调用数据方法
    });
  },
  mounted() {
  },
  methods: {
    handleClick(index) {
    },
    // 发起复诊
    startVisit() {
      this.showTitle = '发起复诊';
      this.addVisible = true;
    },
    // 完善资料
    finishData() {
      this.showTitle = '完善资料';
      this.addVisible = true;
    },
    // 确认制作
    confirmMake() {

    },
    // 邮寄牙膜
    mailModel() {
      this.showTitle = '邮寄牙膜';
      this.addVisible = true;
    },
    // 确认收货
    confirmReceipt() {
    },
    // 提交资料
    commitData() {
      this.showTitle = '提交资料';
      this.addVisible = true;
    },
    // 3D方案
    stealth3D() {

    },
    // 罗慕报告
    lmReport() {

    }
  }
};
</script>

<style lang="scss" scoped>
.patient-details{
  color: #666666;
  position: relative;
   .el-icon-back{
    font-size: 16px;
    font-weight: bold;
  }
  .details-body{
    .details-body-panel{
      padding: 0 20px;
    }
  }
}
.message{
  padding: 0px 20px 40px;
  position: relative;
  /*padding-bottom: 72px;*/
}
.btn{
  width: 88px;
  height: 28px;
  background: #508FCC;
  border-radius: 24px;
  color: #ffffff;
  font-size: 16px;
}
.el-form-item__label{
  color: red;
  font-weight: normal;
}
.el-form-item__content{
  color: #508FCC;
}
.bot-bar{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.active{
  font-size: 20px;
  font-weight: bold;
  color: #508FCC;
}
.samePatient{
  width: 520px;
  height: 331px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -260px;
  margin-top: -165px;
  display: none;
}
.prompt{
  background: rgba(0,0,0,0.3);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1002;
  display: none;
}
.upload{
  /*display: flex;*/
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -564px;
  margin-top: -250px;
  display: none;
}
.upload>div{
  margin: 0px 36px;
}
</style>
